<template>
	<view class="box">
		<!-- 顶部 -->
		<view class="top">
			<view class="timg1 f-w">
				<view class="timg1-bg f-w">
					<image src="https://jw.xzsw2021.com/static/big/icon_237@2x.png" mode=""></image>
				</view>
				<view class="t1c fw-ct">
					<view class="t1c-img f-w">
						<image src="https://jw.xzsw2021.com/static/user/icon_236@2x.png" mode=""></image>
					</view>
					<view>浏览15秒，得10个食材</view>
				</view>
			</view>
			<view class="timg2 f-w">
				<image src="https://jw.xzsw2021.com/static/big/icon_240@2x.png" mode=""></image>
			</view>
			<view class="timg3 f-w">
				<image src="https://jw.xzsw2021.com/static/big/icon_239@2x.png" mode=""></image>
			</view>
		</view>
		<!-- 列表 -->
		<view class="content">
			<view class="list2 fw-bt">
				<view class="shop-demo" v-for="(item,index) of shopList" :key="index" @click="goShopDetail(item.id)">
					<!--图片 -->
					<view class="shop-img f-w">
						<image :src="item.img" mode=""></image>
					</view>
					<!-- 名字 -->
					<view class="shop-name hide-line2 bold f28">{{item.title}}</view>
					<!-- 店名 -->
					<view class="f24 c666 ">{{item.shop_name}}</view>
					<view class="shop-price c3 f-w">
						<!-- 价格 -->
						<view class="f-w red">
							<view class="f24">￥</view>
							<view class="bold f28">{{item.price}}</view>
						</view>
						<view class="f24 c999">￥22.9</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopList: [{
						id: 1,
						img: 'https://jw.xzsw2021.com/static/index/tu_28@2x.png',
						title: '樱桃小西红柿 果番茄樱桃小西红柿 果番茄樱桃小西红柿 果番茄樱桃小西红柿 果番茄',
						shop_name: '佳慧超市（弹子石菜市场）1313he违法和王妃',
						price: '22.9',
						shop_img: 'https://jw.xzsw2021.com/static/index/tx_3@2x.png',
						desc: '最近浏览过',
						good: 'https://jw.xzsw2021.com/static/index/icon_54@2x.png'
				
					},
					{
						id: 2,
						img: 'https://jw.xzsw2021.com/static/index/tu_28@2x.png',
						title: '千禧圣女果番茄',
						shop_name: '佳慧超市（弹子石菜市场）',
						price: '100.9',
						shop_img: 'https://jw.xzsw2021.com/static/index/tx_3@2x.png',
						desc: '前购买过之前购买过之前购买过'
					},
					{
						id: 3,
						img: 'https://jw.xzsw2021.com/static/index/tu_28@2x.png',
						title: '樱桃小西红柿千禧圣女 果番茄',
						shop_name: '佳慧超市（弹子石菜市场）',
						price: '9.9',
						desc: '之前购买过之前购买过之前购买过'
					}
				], //商品列表
			}
		},
		methods: {
			// 去商品详情
			goShopDetail(id) {
				console.log('购买商品');
				uni.navigateTo({
					url:'/pages/client/shop/shop-detail/shop-detail?id='+id+'&type=3'
				})
			},
		}
	}
</script>

<style>
	page{
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.box{
		.top{
			position: relative;
			width: 750rpx;
			height: 250rpx;
			background-color: #18BC37;
			overflow: hidden;
			.timg1{
				margin:  60rpx auto 0;
				width: 710rpx;
				height: 112rpx;
				.timg1-bg{
					position: absolute;
					width: 710rpx;
					height: 112rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.t1c{
					position: relative;
					margin-top: 15rpx;
					width: 710rpx;
					height: 112rpx;
					z-index: 13;
					text-align: center;
					color: #FFFFFF;
					font-size: 28rpx;
					font-weight: bold;
					.t1c-img{
						margin-right: 10rpx;
						width: 24rpx;
						height: 33rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
				}
			}
			.timg2{
				position: absolute;
				bottom: 0;
				left: 0;
				width: 171rpx;
				height: 140rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.timg3{
				position: absolute;
				bottom: 0;
				right: 0;
				width: 211rpx;
				height: 165rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		.content{
			position: relative;
			margin-top: -30rpx;
			width: 750rpx;
			height: 989rpx;
			background: #F5F5F5;
			border-radius: 30rpx 30rpx 0rpx 0rpx;
			z-index: 21;
			
			.list2 {
				padding: 30rpx 20rpx;
				flex-wrap: wrap;
				overflow: hidden;
				&>view {
					position: relative;
					margin-bottom: 20rpx;
					width: 344rpx;
					min-height: 480rpx;
					padding: 20rpx 26rpx 35rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
					box-sizing: border-box;
			
					.shop-img {
						width: 284rpx;
						height: 284rpx;
			
						image {
							width: 100%;
							height: 100%;
						}
					}
			
					.shop-name {
						margin: 20rpx 0 10rpx;
						height: 72rpx;
					}
			
					.shop-name2 {
						height: 64rpx;
						font-size: 24rpx;
						color: #666;
					}
			
					.shop-price {
						margin-top: 24rpx;
						.c999{
							margin-top: 4rpx;
							margin-left: 12rpx;
							text-decoration: line-through;
						}
					}
			
					.shop-tag {
						position: absolute;
						top: 16rpx;
						left: 16rpx;
						width: 60rpx;
						height: 60rpx;
			
						image {
							width: 100%;
							height: 100%;
						}
					}
			
					.shop-good {
						position: absolute;
						top: 0;
						right: 16rpx;
						width: 53rpx;
						height: 71rpx;
			
						image {
							width: 100%;
							height: 100%;
						}
					}
			
					.shop-history {
						position: absolute;
						top: 12rpx;
						left: 50%;
						transform: translateX(-50%);
						width: 180rpx;
						text-align: center;
						white-space: nowrap;
						overflow: hidden;
					}
				}
			}
		}
	}
</style>
